<template>
  <div class="hos_page">
    <user-card
      :islogin="true"
      :isbind="true"
      style="margin-bottom: 0.8125rem"
    ></user-card>
    <template v-if="noresult">
      <div class="noresult">
        <img src="@/assets/img/img_no results@2x.png" alt=""/>
        <div>无数据</div>
      </div>
    </template>
    <template v-else>
      <div class="bill_box">
        <div
          class="bill_list"
          v-for="item in inpList"
          @click="goHospitalDetails(item)">
          <div class="bill_list_1">
            <div>{{ item.deptName }}</div>
          </div>
          <div class="bill_list_2">
            <div>{{ item.doctName }}</div>
            <div style="color: #f72d23">就诊序号: {{ item.regSeeno }}</div>
          </div>
          <div class="bill_list_3">
            <div>预约时间：{{ item.regDate }}</div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import userCard from "@/components/userCard.vue";
import {Tab, TabItem} from "vux";
import {getOutpatientSeeNo} from "@/api/api";

export default {
  components: {
    userCard,
    Tab,
    TabItem,
  },
  data() {
    return {
      noresult: true,
      tabItemShow: "0",
      dateMaskShow: false,
      value: "一周内",
      y: "",
      m: "",
      d: "",
      EndDate: "",
      BeginDate: "",
      inpList: [],
      datelist: [
        {value: 0, name: "一周内", selected: false},
        {value: 0, name: "一月内", selected: false},
        {value: 0, name: "三月内", selected: false},
        {value: 0, name: "一年内", selected: false},
        {value: 0, name: "更早", selected: false},
      ],
    };
  },
  created() {
    if (window.localStorage.getItem("userInfo")) {
      this.userInfo = JSON.parse(window.localStorage.getItem("userInfo"));
    } else {
      this.userInfo = JSON.parse(
        window.localStorage.getItem("defaultUserInfo")
      );
    }
    this.getToday();
    this.GetInptList();
  },
  methods: {
    // 获取患者住院列表
    GetInptList() {
      var data = {
        hosId: "111",
        operIdcardNo: this.userInfo.idNo,

      };
      getOutpatientSeeNo(data).then((res) => {
        if (res.code == 200) {
          this.inpList = res.data.regInfo;
          if (res.data.regInfo.length > 0) {
            this.noresult = false;
          }
        }
      });
    },
    // 跳转住院详情
    goHospitalDetails(item) {
      // item.name = this.userInfo.name;
      // item.sex = this.userInfo.sex == 1 ? "男" : "女";
      // item.age = this.getAge(this.userInfo.birthDay);
      // this.$router.push({
      //   path: "/hospital_details",
      //   query: item,
      // });
    },
    dmsfun() {
      this.dateMaskShow = !this.dateMaskShow;
    },
    dateClick(e, date) {
      console.log(e.currentTarget.dataset.idx);
      var idx = e.currentTarget.dataset.idx;
      this.dmsfun();
      (this.value = date.name),
        this.datelist.forEach((element) => {
          console.log(element);
          element.selected = false;
        });
      this.datelist[idx].selected = true;
      console.log(this.datelist);
      this.changeDay(date.name);
    },
    getToday() {
      var today = new Date();
      var yy = today.getFullYear();
      var mm = today.getMonth() + 1;
      var dd = today.getDate();
      this.BeginDate =
        yy + "-" + (mm < 10 ? "0" + mm : mm) + "-" + (dd < 10 ? "0" + dd : dd);
      //
      var nowdate = new Date();
      var oneweekdate = new Date(nowdate - 7 * 24 * 3600 * 1000);
      this.y = oneweekdate.getFullYear();
      this.m = oneweekdate.getMonth() + 1;
      this.d = oneweekdate.getDate();
      this.EndDate =
        this.y +
        "-" +
        (this.m < 10 ? "0" + this.m : this.m) +
        "-" +
        (this.d < 10 ? "0" + this.d : this.d);
    },
    changeDay(name) {
      console.log(name);
      var nowdate = new Date();
      if (name == "一周内") {
        var oneweekdate = new Date(nowdate - 7 * 24 * 3600 * 1000);
        this.y = oneweekdate.getFullYear();
        this.m = oneweekdate.getMonth() + 1;
        this.d = oneweekdate.getDate();
        this.EndDate =
          this.y +
          "-" +
          (this.m < 10 ? "0" + this.m : this.m) +
          "-" +
          (this.d < 10 ? "0" + this.d : this.d);
      } else if (name == "一月内") {
        nowdate.setMonth(nowdate.getMonth() - 1);
        this.y = nowdate.getFullYear();
        this.m = nowdate.getMonth() + 1;
        this.d = nowdate.getDate();
        this.EndDate =
          this.y +
          "-" +
          (this.m < 10 ? "0" + this.m : this.m) +
          "-" +
          (this.d < 10 ? "0" + this.d : this.d);
      } else if (name == "三月内") {
        nowdate.setMonth(nowdate.getMonth() - 3);
        this.y = nowdate.getFullYear();
        this.m = nowdate.getMonth() + 1;
        this.d = nowdate.getDate();
        this.EndDate =
          this.y +
          "-" +
          (this.m < 10 ? "0" + this.m : this.m) +
          "-" +
          (this.d < 10 ? "0" + this.d : this.d);
      } else if (name == "一年内") {
        nowdate.setMonth(nowdate.getMonth() - 12);
        this.y = nowdate.getFullYear();
        this.m = nowdate.getMonth() + 1;
        this.d = nowdate.getDate();
        this.EndDate =
          this.y +
          "-" +
          (this.m < 10 ? "0" + this.m : this.m) +
          "-" +
          (this.d < 10 ? "0" + this.d : this.d);
      } else if (name == "更早") {
        this.EndDate = "";
      }
      this.GetInptList();
    },
    getAge(strBirthday) {
      var returnAge;

      var strBirthdayArr = strBirthday.split("-");

      var birthYear = strBirthdayArr[0];

      var birthMonth = strBirthdayArr[1];

      var birthDay = strBirthdayArr[2];

      var d = new Date();

      var nowYear = d.getFullYear();

      var nowMonth = d.getMonth() + 1;

      var nowDay = d.getDate();

      if (nowYear == birthYear) {
        returnAge = 0; //同年 则为0岁
      } else {
        var ageDiff = nowYear - birthYear; //年之差

        if (ageDiff > 0) {
          if (nowMonth == birthMonth) {
            var dayDiff = nowDay - birthDay; //日之差

            if (dayDiff < 0) {
              returnAge = ageDiff - 1;
            } else {
              returnAge = ageDiff;
            }
          } else {
            var monthDiff = nowMonth - birthMonth; //月之差

            if (monthDiff < 0) {
              returnAge = ageDiff - 1;
            } else {
              returnAge = ageDiff;
            }
          }
        } else {
          returnAge = -1; //返回-1 表示出生日期输入错误 晚于今天
        }
      }

      return returnAge; //返回周岁年龄
    },
  },
  destroyed() {
  },
};
</script>
<style scoped>
.hos_page {
  height: 100vh;
  overflow: hidden;
}

.tab_box {
  width: calc(100% - 2rem);
  padding: 0 1rem;
}

.cus_select {
  padding: 0px 1rem;
  background-color: #f7fafd;
  width: calc(100% - 2rem);
  height: 2.75rem;
  display: flex;
  align-items: center;
  font-size: 0.875rem;
}

.cus_select img {
  width: 1.375rem;
  height: 1.375rem;
  display: block;
}

.cus_select div {
  width: calc(100% - 2.75rem);
  background-color: #f7fafd;
}

.date_mask {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 100;
}

.date_mask_ul {
  position: fixed;
  bottom: 0px;
  left: 0px;
  /* height: 18.75rem; */
  width: 100%;
  background-color: #ffffff;
}

.date_mask_li {
  width: 100%;
  height: 3.125rem;
  border-bottom: 0.0625rem solid #eee;
  line-height: 50px;
  text-align: center;
  font-size: 0.9375rem;
  color: #3f4551;
}

.date_mask_li:last-of-type {
  background-color: #f1f5f9;
}

.bill_box {
  height: calc(100vh - 125px);
  overflow-y: auto;
}

.bill_list {
  margin: 0.9375rem 1rem;
  width: calc(100% - 4rem);
  padding: 0.9375rem 1rem;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 0px 15px 0px rgba(174, 206, 254, 0.3);
  border-radius: 6px;
  color: #a4adbe;
}

.bill_list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.bill_list_1 > div:nth-of-type(1) {
  color: #131a2a;
}

.bill_list_1 > div:nth-of-type(2) {
  color: #f72d23;
}

.bill_list_2 {
  font-size: 0.875rem;
  margin: 5px 0;
}

.bill_list_3 > div:nth-of-type(1) {
  font-size: 0.75rem;
}

.bill_list_3 > div:nth-of-type(2) {
  font-size: 0.9375rem;
  width: 3.4375rem;
  height: 1.875rem;
  border: 1px solid rgba(68, 142, 255, 1);
  border-radius: 3px;
  color: #448eff;
  line-height: 1.875rem;
  text-align: center;
}

.noresult {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  height: 31.25rem;
}

.noresult img {
  display: block;
  width: 12.5rem;
  height: 9.75rem;
}
</style>
